<template>
	<view class="px-10 static">
		<view class="fixed h-screen w-screen" style="z-index: -100; background: #FFF8F5; top: 0; left:0"></view>
		<view class="fixed bg-white w-screen flex flex-row align-items-center justify-center text-14" style="top: 0; left:0; height: 70rpx;z-index:100">
			<view class="px-11 relative h-full" :class="{'theme-color': type==0}" @tap="changeType(0)">
				<view style="line-height: 70rpx;">全部订单</view>
				<view class="absolute"  style="height: 10rpx; width: 60rpx; bottom: 0; left: 50%; transform: translate(-50%,0);" :style="{'background-color': type==0 ? '#FF9700': '#ffffff'}"></view>
			</view>
			<view style="width: 6rpx; height: 20rpx; background-color: #bbb;"></view>
			<view class="px-11 relative h-full" :class="{'theme-color': type==1}" @tap="changeType(1)">
				<view style="line-height: 70rpx;">审核中</view>
				<view class="absolute"  style="height: 10rpx; width: 60rpx; bottom: 0; left: 50%; transform: translate(-50%,0);" :style="{'background-color': type==1 ? '#FF9700': '#ffffff'}"></view>
			</view>
			<view style="width: 6rpx; height: 20rpx; background-color: #bbb;"></view>
			<view class="px-11 relative h-full" :class="{'theme-color': type==2}" @tap="changeType(2)">
				<view style="line-height: 70rpx;">已通过</view>
				<view class="absolute"  style="height: 10rpx; width: 60rpx; bottom: 0; left: 50%; transform: translate(-50%,0);" :style="{'background-color': type==2 ? '#FF9700': '#ffffff'}"></view>
			</view>
			<view style="width: 6rpx; height: 20rpx; background-color: #bbb;"></view>
			<view class="px-11 relative h-full" :class="{'theme-color': type==3}" @tap="changeType(3)">
				<view style="line-height: 70rpx;">未通过</view>
				<view class="absolute" style="height: 10rpx; width: 60rpx; bottom: 0; left: 50%; transform: translate(-50%,0);" :style="{'background-color': type==3 ? '#FF9700': '#ffffff'}"></view>
			</view>
			<view style="width: 6rpx; height: 20rpx; background-color: #bbb;"></view>
			<view class="px-11 relative h-full" :class="{'theme-color': type==4}" @tap="changeType(4)">
				<view style="line-height: 70rpx;">已取消</view>
				<view class="absolute"  style="height: 10rpx; width: 60rpx; bottom: 0; left: 50%; transform: translate(-50%,0);" :style="{'background-color': type==4 ? '#FF9700': '#ffffff'}"></view>
			</view>
		</view>
		<view style="height: 70rpx;" beizhu="占位"></view>
		<view class="rounded-lg mt-10">
			<view v-for="(task,index) in task_list" :key="task.id" class="flex flex-row border-1 rounded-base text-12 align-items-center bg-white px-10" :class="{'mb-12': task_list.length-1!=index}" style="line-height: 42rpx; border-color: #bbb;" @tap="navigateTo('/pages/task/detail?id='+task.id)">
				<view class="flex flex-row align-items-center justify-center mr-15 p-10 border-box" style="width: 142rpx; height: 142rpx;box-shadow: 0 0 5px 0px rgba(0,0,0,0.3); border:1px solid #bbb;">
					<image v-if="transport_scene_list_obj[task.transport_scene]" class="w-full h-full  " :src="transport_scene_list_obj[task.transport_scene].img"></image>
				</view> 
				<view class="my-6 flex-1 " style="color: #444;">
					<view class="flex flex-row">
						<view class="flex-1  " >货物场景：{{task.transport_scene}}</view>
						<view class="theme-color" v-if="task.task_status==-1" @tap.stop="navigateTo('/pages/task/form?id='+task.id+'&type=copy')">复制编辑></view>
						<view class="theme-color" v-else>查看详情</view>
					</view>
					<view>货物种类：{{task.transport_type}}</view>
					<view>上门时间：{{task.exec_at}}</view>
					<!-- <view>预估重量：{{task.weight}} 吨</view> -->
					<view class="flex flex-row">
						<view class="flex-1">订单金额：￥{{task.money}}</view>
						<view class="text-15 text-bold " style="color: #7D7D7D;" v-if="task.task_status == 1">审核中</view>
						<view class="text-15 text-bold " style="color: #006BFF;" v-if="task.task_status == 2">已通过</view>
						<view class="text-15 text-bold " style="color: #006BFF;" v-if="task.task_status == 3">已接单</view>
						<view class="text-15 text-bold " style="color: #006BFF;" v-if="task.task_status == 4">已完成</view>
						<view class="text-15 text-bold " style="color: #FF2800;" v-if="task.task_status == -1">未通过</view>
						<view class="text-15 text-bold " style="color: #000;" v-if="task.task_status == -2">已取消</view>
					</view>
				</view>
			</view>
		</view>
		<view class="text-14 text-center my-10 pb-10" style="color: #000"> ~ 暂无更多订单 ~ </view>
		
		<view class="fixed" style="bottom: 150rpx; right: 15rpx;">
			<image class="" src="/static/publish-btn.png" style="width: 140rpx; height: 140rpx;" @tap="toPublish"></image>
		</view>
	</view>
</template>

<script>
	import request from '/utils/request.js';
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				type: 0,
				task_list: [],
				page: 1,
				limit: 20,
				has_more: true,
				task_status: '',
				
				transport_scene_list_arr: [],
				transport_scene_list_obj: {},
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			// 获取货运配置数据
			request.post('transport/config').then(res=>{
				// this.transport_distance_list = res.transport_distance_list;
				// this.transport_scene_list = res.transport_scene_list;
				// this.transport_type_list = res.transport_type_list;
				this.transport_scene_list_arr = res.transport_scene_list_arr;
				this.transport_scene_list_obj = res.transport_scene_list_obj;
			})
		},
		onShow() {
			this.getTaskList(true);
		},
		onReachBottom() {
			this.getTaskList();
		},
		onShareAppMessage() {
			return {
			  title: '飞兔货运',
			  path: '/pages/task/index',
			  // imageUrl : ''
			}
		},
		onShareTimeline() {
			return {
			  title: '飞兔货运',
			  // query: '',
			  // imageUrl : ''
			}
		},
		methods: {
			// 跳转发布订单
			toPublish(){
				console.log(this.userInfo)
				if(!this.userInfo.phone){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(()=>{
						this.navigateTo('/pages/login')
					},1000)
				// }else if(!this.userInfo.is_verification){
				// 	uni.showToast({
				// 		title: '请先完成企业认证',
				// 		icon: 'none'
				// 	})
				// 	setTimeout(()=>{
				// 		this.navigateTo('/pages/user/certification')
				// 	},1000)
				}else{
					this.navigateTo('/pages/task/form')
				}
			},
			// 获取订单列表
			getTaskList(force = false){
				if(force) {
					this.page = 1;
					this.has_more = true;
				};
				if(!this.has_more) return;
				request.post('/transport/taskList', {
					task_status: this.task_status,
					page: this.page,
					limit: 20,
				}).then(res=>{
					this.task_list = force ? res.list : this.task_list.concat(res.list);
					this.has_more = res.has_more;
					this.page = res.page + 1;
				})
			},
			changeType(type){
				this.type = type;
				switch(type){
					case 0:
						this.task_status = '';
						break;
					case 1:
						this.task_status = 1;
						break;
					case 2:
						this.task_status = 2;
						break;
					case 3:
						this.task_status = -1;
						break;
					case 4:
						this.task_status = -2;
						break;
				}
				this.getTaskList(true);
			},
			navigateTo($url){
				uni.navigateTo({
					'url': $url
				})
			}
		}
	}
</script>

<style>
	.theme-color{
		color: #FF9700
	}
</style>
